<template>
    <div class="meat-wrapper">
        <div class="img-box-two">
            <img src="../assets/05.png" alt="">
        </div>
        <div style="margin-left: 10px;width: 210px;height: 100%;display: flex;flex-flow: column;justify-content: space-between">
            <div style="font-size: 16px">肉面团(好吃)</div>
            <div style="font-size: 12px;color: gray">新鲜面团</div>
            <div style="font-size: 12px;color: gray">￥15</div>
        </div>
        <div style="width: 50px;height: 100%;display: flex;justify-content: space-between;align-items: center;">
            <div v-show="this.$store.state.a===0" @click="numberJian">
                <i class="el-icon-remove" style="color: gray;font-size: 18px"></i>
            </div>
            <div style="font-size: 16px;color: gray">{{orderNumber}}</div>
            <div @click="numberPlus">
                <i class="el-icon-circle-plus" style="color: dodgerblue;font-size: 18px"></i>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "meat",
        data(){
            return{
                orderNumber:''
            }
        },
        methods:{
            numberPlus(){
                this.orderNumber = Number(this.orderNumber)
                this.orderNumber = this.orderNumber + 1
                if(this.orderNumber>0){
                    this.$store.state.a = 0
                }
            },
            numberJian(){
                this.orderNumber = Number(this.orderNumber)
                this.orderNumber = this.orderNumber - 1
                if(this.orderNumber === 0){
                    this.orderNumber = '';
                    this.$store.state.a = 1
                }
            }
        },

    }
</script>

<style scoped>
    .meat-wrapper{
        width: 375px;
        height: 80px;
        display: flex;
    }
    .img-box-two img{
        width: 80px;
        height: 80px;
        margin-left: 10px;
    }
</style>
